<template>
    <div class="main-con communitySetting">
        <!-- 首页标题栏 -->
        <div class="main-title">
            社群高级设置
        </div>

        <!-- 表单信息 -->
        <div class="form-con">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="191px" class="demo-ruleForm">
                <h2 class="item-title">
                    基本设置
                </h2>
                <div class="form-item-con">
                    <el-form-item label="标语（slogan）：" prop="slogan">
                        <div class="form-item">
                            <div class="form-item-input-big">
                                <el-input size="small" v-model="ruleForm.slogan"></el-input>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="海报图：" prop="posterPic">
                        <div class="form-item">
                            <el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="uploadProductMainImg"
                                v-model="ruleForm.posterPic">
                                <img v-if="ruleForm.posterPic" :src="ruleForm.posterPic" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <div class="img-tips">*建议尺寸1242*2208，不允许添加视频</div>
                        </div>
                    </el-form-item>
                </div>
                <h2 class="item-title">
                    订单设置
                </h2>
                <div class="form-item-con">
                    <el-form-item label="待付款订单取消时间：" prop="cancelInterval">
                        <div class="form-item">
                            <div>拍下未付款订单</div>
                            <div class="form-item-input">
                                <el-input size="small" v-model="ruleForm.cancelInterval"></el-input>
                            </div>
                            <div>分钟内未付款，自动取消订单</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="待付款订单即将取消提醒：" prop="remindInterval">
                        <div class="form-item">
                            <div>未付款订单在即将取消前</div>
                            <div class="form-item-input">
                                <el-input size="small" v-model="ruleForm.remindInterval"></el-input>
                            </div>
                            <div>分钟发送消息提醒用户</div>
                        </div>
                    </el-form-item>
                </div>
                <div class="submit-btn-con">
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import {
    queryCommunitySettingInfo,
    saveCommunitySettingInfo
} from "@/common/service/systemManagement/communitySetting.js";
import { getUploadImgSrc } from "@/common/service/uploadImg/uploadImg.js";
export default {
    name: "communitySetting",
    data() {
        return {
            ruleForm: {
                slogan: "",
                posterPic: "",
                cancelInterval: "",
                remindInterval: ""
            },
            rules: {
                slogan: [
                    {
                        required: true,
                        message: "请输入标语",
                        trigger: "blur"
                    }
                ],
                posterPic: [
                    {
                        required: true,
                        message: "请选择海报图",
                        trigger: "change"
                    }
                ],
                cancelInterval: [
                    {
                        required: true,
                        message: "请输入待付款订单取消时间",
                        trigger: "blur"
                    }
                ],
                remindInterval: [
                    {
                        required: true,
                        message: "请输入待付款订单即将取消提醒时间",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        //初始化表格数据
        this._queryCommunitySettingInfo();
    },
    methods: {
        /*-------------------------------------图片上传操作-------------------------------------*/
        //上传商品主图
        uploadProductMainImg(file) {
            const self = this;
            let fileType = file.type; //==='image/jpeg';
            let typeList = ["image/jpg", "image/png", "image/jpeg"];

            if (typeList.indexOf(fileType) == -1) {
                this.$message.error("上传图片只能是 JPG、PNG格式!");
                return false;
            }
            getUploadImgSrc(file)
                .then(res => {
                    self.ruleForm.posterPic = res;
                })
                .catch(res => {
                    this.$message.error("上传失败");
                });
            return false;
        },

        /*----------------------------查询操作----------------------------*/
        //查询操作记录信息表格数据
        _queryCommunitySettingInfo() {
            queryCommunitySettingInfo()
                .then(res => {
                    this.ruleForm.slogan = res.slogan;
                    this.ruleForm.posterPic = res.posterPic;
                    this.ruleForm.cancelInterval = res.cancelInterval;
                    this.ruleForm.remindInterval = res.remindInterval;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*----------------------------保存操作----------------------------*/
        //表单校验
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this._saveCommunitySettingInfo();
                } else {
                    return false;
                }
            });
        },
        //保存社区高级设置的信息
        _saveCommunitySettingInfo() {
            var id = JSON.parse(localStorage.getItem("userInfo")).id
                ? JSON.parse(localStorage.getItem("userInfo")).id
                : null;
            this.ruleForm.userId = id;
            saveCommunitySettingInfo(this.ruleForm)
                .then(res => {
                    this.$message.success("保存成功！");
                    this._queryCommunitySettingInfo();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-item {
    display: flex;
    align-items: center;
    color: #666;
}
.form-item-input {
    width: 60px;
    margin: 0 15px;
}
.form-item-input-big {
    width: 385px;
}
.img-tips {
    margin-left: 20px;
}
</style>